<!--
  * @Description: 企业信息编辑页面
  * @Author: [Your Name]
  * @Date: [Current Date]
  * @FilePath: /pages/user/firm/edit.vue
-->

<template>
  <view class="p-h24">
    <RcNavigation
      title="编辑企业信息"
      iconColor="white"
      color="#fff"
      bgColor="#1269FF"
    />

    <view class="card flex m-t40">
      <text class="flex-1 text-700-130">企业名称</text>
      <input
        v-model="formData.title"
        class="text-r"
        type="text"
        placeholder="请填写公司名称"
      />
    </view>

    <view class="card flex">
      <text class="flex-1 text-700-130">我的职务</text>
      <input
        v-model="formData.duties"
        class="text-r"
        type="text"
        placeholder="请填写职务"
      />
    </view>

    <view class="card flex">
      <text class="flex-1 text-700-130">企业地址</text>
      <input
        v-model="formData.address"
        class="text-r"
        type="text"
        placeholder="请填写企业地址"
      />
    </view>

    <view class="m-t40">
      <text class="text-700-130">企业简介</text>
      <textarea
        v-model="formData.intro"
        class="synopsis m-t24"
        placeholder="请输入企业简介"
      ></textarea>
    </view>

    <view class="m-t40">
      <text class="text-700-130">企业照片</text>
      <view class="photo flex-d-c m-t24" @click="clickUpload">
        <template v-if="formData.images === ''">
          <image class="square-24" src="@/static/images/user/add.png" />
          <text class="m-t20 text-400-424">点击上传</text>
        </template>
        <image v-else class="w h" :src="formData.images" mode="aspectFill" />
      </view>
    </view>

    <view class="flex-c p-b40 m-t40">
      <RcButton width="340" text="保存" @click="submit" />
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import type { UserData } from "@/types/api.d.ts";
import { useUserStore } from "@/stores/user";
import useUpload from "@/hooks/use-upload";

import RcButton from "@/components/button.vue";
import RcNavigation from "@/components/navigation.vue";
const { userCompany, getUserInfo } = useUserStore();
const { chooseImage, uploadImage } = useUpload();

// 表单数据
const formData = reactive({
  title: "",
  duties: "",
  address: "",
  intro: "",
  images: "",
});

// 加载企业数据
const loadCompanyData = async () => {
  Object.assign(formData, userCompany);
};

// 上传图片
const clickUpload = async () => {
  const { filePath, success, size } = await chooseImage();

  if (!success) return;

  // 限制文件大小为5MB
  if (size > 5 * 1024 * 1024) {
    uni.$u.toast("文件大小不能超过5MB");
    return;
  }

  uni.showLoading({ title: "上传中...", mask: true });

  const uploadResult = await uploadImage(filePath);

  uni.hideLoading();

  if (uploadResult.success) {
    formData.images = uploadResult.url;
  }
};

// 表单验证
const validateForm = (): boolean => {
  if (formData.title === "") {
    uni.$u.toast("请输入企业名称");
    return false;
  }

  if (formData.duties === "") {
    uni.$u.toast("请输入职务");
    return false;
  }

  if (formData.address === "") {
    uni.$u.toast("请输入企业地址");
    return false;
  }

  if (formData.intro === "") {
    uni.$u.toast("请输入企业简介");
    return false;
  }

  if (formData.images === "") {
    uni.$u.toast("请上传企业照片");
    return false;
  }

  return true;
};

// 提交表单
const submit = async () => {
  if (!validateForm()) return;

  uni.showLoading({ title: "保存中...", mask: true });

  try {
    const res = await uni.$u.post<UserData>(
      "/company/saveCommpanyInfo",
      formData
    );

    if (res.code === 1) {
      uni.$u.toast("保存成功");
      getUserInfo();
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    } else {
      uni.$u.toast(res.msg || "保存失败");
    }
  } catch (error) {
    uni.$u.toast("网络错误");
  } finally {
    uni.hideLoading();
  }
};

onLoad(() => {
  loadCompanyData();
});
</script>

<style lang="scss" scoped>
.card {
  height: 110rpx;
  border-bottom: 1rpx solid $border-color-4;

  .text-r {
    text-align: right;
  }
}

.synopsis {
  width: 100%;
  height: 314rpx;
  padding: 20rpx;
  border-radius: 6rpx;
  background: #f9f9f9;
  border: 1rpx solid #cccccc;
}

.photo {
  width: 300rpx;
  height: 200rpx;
  background: #f9f9f9;
  border-radius: 6rpx;
  border: 1rpx solid #cccccc;
  overflow: hidden;
}

.text-700-130 {
  font-weight: 700;
  color: $text-color-1;
  font-size: 30rpx;
}

.text-400-424 {
  color: $text-color-4;
  font-size: 24rpx;
}

.square-24 {
  width: 24rpx;
  height: 24rpx;
}

.m-t20 {
  margin-top: 20rpx;
}

.m-t24 {
  margin-top: 24rpx;
}

.m-t40 {
  margin-top: 40rpx;
}

.p-h24 {
  padding-left: 24rpx;
  padding-right: 24rpx;
}

.p-b40 {
  padding-bottom: 40rpx;
}

.flex {
  display: flex;
  align-items: center;
}

.flex-d-c {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flex-c {
  display: flex;
  justify-content: center;
}

.flex-1 {
  flex: 1;
}
</style>